<template>
  <div class="DataCenterMgt">
    <div class="content-left">
      <div class="content-li">
        <div class="content-code" v-for="(item,index) in leftCode" :class="active==index?`active`:``" @click="getActive(index,item.name)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="content-right">
      <div class="title-big">{{ title }}</div>
      <!--      自动踢人-->
      <automaticKicking v-if="active==0"></automaticKicking>
       <!--      智能应答-->
      <IntelligentResponse v-if="active==1"></IntelligentResponse>
      <!--      入群欢迎语-->
      <welcomeMessage v-if="active==2"></welcomeMessage>
      <!--      关键词拉群-->
      <keywordGroupBuilding v-if="active==3"></keywordGroupBuilding>
       <!--      标签拉群-->
      <tagPullGroup v-if="active==4"></tagPullGroup>
       <!--       新客户运营-->
      <NewOperations v-if="active==5"></NewOperations>
       <!--      接受新客户-->
      <acceptNewCustomers v-if="active==6"></acceptNewCustomers>
       <!--      关键词打标签-->
      <keywordLabel v-if="active==7"></keywordLabel>
       <!--      客户朋友圈-->
      <circleFriends v-if="active==8"></circleFriends>
      <!--      高级群发-->
      <advancedMassSend v-if="active==9"></advancedMassSend>
      <!--      极速群发-->
      <rapidMass v-if="active==10"></rapidMass>
      <!--      批量拉群-->
       <batchGroup v-if="active==11"></batchGroup>
       <!--       sop-->
      <sopLogs v-if="active==12"></sopLogs>
       <!--      群活码-->
      <groupActivityCode v-if="active==13"></groupActivityCode>
       <!--      在线聊天-->
      <onlineChat v-if="active==14"></onlineChat>
<!--                 客服分发-->
      <customerServiceDistribution v-if="active==15"></customerServiceDistribution>
<!--      群积分-->
      <groupIntegral v-if="active==16"></groupIntegral>

    </div>
  </div>
</template>
<script>

export default {
  name: "operationLogMgt",
  components: {
    'automaticKicking': () => import('./automaticKicking.vue'),
    'IntelligentResponse': () => import('./IntelligentResponse.vue'),
    'welcomeMessage': () => import('./welcomeMessage.vue'),
    'keywordGroupBuilding': () => import('./keywordGroupBuilding.vue'),
    'tagPullGroup': () => import('./tagPullGroup.vue'),
    'NewOperations': () => import('./NewOperations.vue'),
    'acceptNewCustomers': () => import('./acceptNewCustomers.vue'),
    'keywordLabel': () => import('./keywordLabel.vue'),
    'circleFriends': () => import('./circleFriends.vue'),
    'advancedMassSend': () => import('./advancedMassSend.vue'),
    'rapidMass': () => import('./rapidMass.vue'),
    'batchGroup': () => import('./batchGroup.vue'),
    'sopLogs': () => import('./sopLogs.vue'),
    'groupActivityCode': () => import('./groupActivityCode.vue'),
    'onlineChat': () => import('./onlineChat.vue'),
    'customerServiceDistribution': () => import('./customerServiceDistribution.vue'),
    'groupIntegral': () => import('./groupIntegral.vue'),

  },
  data() {
    return {
      active: 0,
      title:'',
      leftCode: [
        {id: 0, name: '自动踢人',},
        {id: 1, name: '智能应答', showHeight:true,},
        {id: 2, name: '入群欢迎语',},
        {id: 3, name: '关键词拉群',},
        {id: 4, name: '标签拉群',},
        {id: 5, name: '新客户运营', showHeight:true,},
        {id: 6, name: '接受新客户',},
        {id: 7, name: '关键词打标签',},
        {id: 8, name: '客户朋友圈', showHeight:true,},
        {id: 9, name: '高级群发',},
        {id: 10, name: '极速群发',},
        {id: 11, name: '批量拉群',},
        {id: 12, name: 'SOP',},
        {id: 13, name: '群活码',},
        {id: 14, name: '在线聊天',},
        {id: 15, name: '客服分发',},
        {id: 16, name: '群积分',},
      ],
    }
  },
  created() {
    this.title=this.leftCode[0].name;
  },
  methods: {
    getActive(index,name) {
      this.active = index;
      this.title=name;
    }
  },
}
</script>

<style scoped lang="scss">
.DataCenterMgt {
  display: flex;
  background: #fff;
  border-radius: 6px;
  margin: 10px;
  height: 100%;


  .content-left {
    width: 150px;
    border-right: 1px solid #eee;
    padding: 10px 20px;
    height: 100%;
    overflow-y: auto;

    .content-li {
      margin-bottom: 20px;

      .content-title {
        font-size: 12px;
        color: rgba(0, 0, 0, .45);
        margin-bottom: 4px;
        font-weight: 400;
      }

      .content-code {
        height: 30px;
        display: flex;
        align-items: center;
        padding: 0px 10px;
        border-radius: 5px;
        cursor: pointer;
        margin-bottom: 5px;

        &.active {
          background-color: #ebf2ff;
          border-radius: 5px;
        }

      }
    }
  }

  .content-right {
    padding: 10px 20px;
    flex: 1;
    height: 100%;
    overflow-y: auto;
  }
}
.title-big {
  font-size: 16px;
  margin-bottom: 20px;
  padding-top: 10px;
}
</style>
